<template>
  <div class="first">
     
    
    <!-- 头部背景图片 -->
    <div class="background">
      <!-- <img :src="imgSrc" width="100%" height="100%" alt="" /> -->
       <img src="../assets/3.jpg" width="100%" height="100%" alt="" />
    </div>
    <!-- 头部背景图片上的内容 -->
    <div class="front">
      <el-button class="a1" icon="iconfont iconbilibili4" circle
        >首页</el-button
      >
      <el-input class="input1" placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button-group class="a2">
        <el-button icon="iconfont iconbilibili4" circle>直播</el-button>
        <el-button icon="iconfont iconbilibili4" circle>会员购</el-button>
        <el-button icon="iconfont iconbilibili4" circle>动态</el-button>
        <el-button icon="iconfont iconbilibili4" circle>收藏</el-button>
        <el-button icon="iconfont iconbilibili4" circle>历史</el-button>
        <el-button icon="iconfont iconbilibili4" circle>创作中心</el-button>
      </el-button-group>
      <div class="blank">
        <el-row></el-row>
      </div>
      <!-- <svg class="menuIcon icon11" aria-hidden="true">
        <use xlink:href="#iconbilibili11"></use>
      </svg> -->
      <img class="logo1" src="../assets/1.png">
      <!-- <svg class="menuIcon icon22" aria-hidden="true">
        <use xlink:href="#iconbilibili-copy"></use>
      </svg>
      <svg class="menuIcon icon33" aria-hidden="true">
        <use xlink:href="#iconbilibili-copy"></use>
      </svg> -->
  
    </div>
    
    <!-- 主体部分 -->
    <div class="body">
      <div class="table">
        <table class="table1" style="background-color:#FFFF77" border="1">
          <tr>
            <th width="180px" height="120px" align="center">
              <svg class="menuIcon iconm1" aria-hidden="true">
                <use xlink:href="#iconfaxian-29"></use></svg
              >热门频道
            </th>
            <th>
              <table class="table2" border="1">
                <tr>
                  <td>
                    <img class="img_1" src="../assets/back_picture/1_1.png" alt="用来指定加载不成功的文本" />
                  </td> 
                  <td>
                    <img class="img_1" src="../assets/back_picture/1_2.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/1_3.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/1_4.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/1_5.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/1_6.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <!-- <td>
                    <img class="img_1" src="../assets/back_picture/1_7.png" alt="用来指定加载不成功的文本" />
                  </td> -->
                  <!-- <td>
                    <img class="img_1" src="../assets/back_picture/1_8.png" alt="用来指定加载不成功的文本" />
                  </td> -->
                </tr>
                <tr>
                  <td>
                    <img class="img_1" src="../assets/back_picture/2_1.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/2_2.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/2_3.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/2_4.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/2_5.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <td>
                    <img class="img_1" src="../assets/back_picture/2_6.png" alt="用来指定加载不成功的文本" />
                  </td>
                  <!-- <td>
                    <img class="img_1" src="../assets/back_picture/2_7.png" alt="用来指定加载不成功的文本" />
                  </td> -->
                  <!-- <td>
                    <img class="img_1" src="../assets/back_picture/2_8.png" alt="用来指定加载不成功的文本" />
                  </td> -->
                </tr>
              </table>
            </th>
          </tr>
          <tr>
            <td align="center">
              <svg class="menuIcon iconm1" aria-hidden="true">
                <use xlink:href="#iconshaixuan"></use></svg
              >热门专栏
            </td>
            <td>
              <el-row>
                <el-button type="success" plain>动画</el-button>
                <el-button type="success">番剧</el-button>
                <el-button type="success" plain>直播</el-button>
                <el-button type="success">编程</el-button>
                <el-button type="success" plain>数码</el-button>
                <el-button type="success">生活</el-button>
              </el-row>
            </td>
          </tr>

          <tr>
            <td align="center">
              <svg class="menuIcon iconm1" aria-hidden="true">
                <use xlink:href="#iconqiqiang-4"></use></svg
              >快速分栏
            </td>
            <td>
              <el-dropdown>
                <el-button type="success">
                  生活<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>搞笑</el-dropdown-item>
                  <el-dropdown-item>日常</el-dropdown-item>
                  <el-dropdown-item>手工</el-dropdown-item>
                  <el-dropdown-item>绘画</el-dropdown-item>
                  <el-dropdown-item>运动</el-dropdown-item>
                  <el-dropdown-item>其他</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button type="success" plain>
                  知识<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>科学科普</el-dropdown-item>
                  <el-dropdown-item>社科人文</el-dropdown-item>
                  <el-dropdown-item>财经</el-dropdown-item>
                  <el-dropdown-item>校园学习</el-dropdown-item>
                  <el-dropdown-item>职业职场</el-dropdown-item>
                  <el-dropdown-item>线下运营</el-dropdown-item>
                  <el-dropdown-item>其他</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button type="success">
                  国创<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>国创动画</el-dropdown-item>
                  <el-dropdown-item>国创原创相关</el-dropdown-item>
                  <el-dropdown-item>国创广播剧</el-dropdown-item>
                  <el-dropdown-item>咨询</el-dropdown-item>
                  <el-dropdown-item>其他</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button type="success" plain>
                  时尚<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>美妆</el-dropdown-item>
                  <el-dropdown-item>服饰</el-dropdown-item>
                  <el-dropdown-item>健生</el-dropdown-item>
                  <el-dropdown-item>T台</el-dropdown-item>
                  <el-dropdown-item>风尚标</el-dropdown-item>
                  <el-dropdown-item>其他</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button type="success">
                  游戏<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>单机游戏</el-dropdown-item>
                  <el-dropdown-item>电子竞技</el-dropdown-item>
                  <el-dropdown-item>手机游戏</el-dropdown-item>
                  <el-dropdown-item>网络游戏</el-dropdown-item>
                  <el-dropdown-item>桌游棋牌</el-dropdown-item>
                  <el-dropdown-item>游戏赛事</el-dropdown-item>
                  <el-dropdown-item>其他</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button type="success" plain>
                  影视<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>影视杂谈</el-dropdown-item>
                  <el-dropdown-item>影视剪辑</el-dropdown-item>
                  <el-dropdown-item>短片</el-dropdown-item>
                  <el-dropdown-item>预告*咨询</el-dropdown-item>
                  <el-dropdown-item>其他</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <el-button type="success">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>搞笑</el-dropdown-item>
                  <el-dropdown-item>美食</el-dropdown-item>
                  <el-dropdown-item>娱乐圈</el-dropdown-item>
                  <el-dropdown-item>动物圈</el-dropdown-item>
                  <el-dropdown-item>汽车</el-dropdown-item>
                  <el-dropdown-item>其他</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </td>
          </tr>
          <tr>
            <td align="center">
              <svg class="menuIcon iconm1" aria-hidden="true">
                <use xlink:href="#iconcaidan-4"></use></svg
              >更多功能
            </td>
            <td>
              <el-row>
                <el-button type="success">活动</el-button>
                <el-button type="success" plain>课堂</el-button>
                <el-button type="success">礼包</el-button>
                <el-button type="success" plain>课堂</el-button>
                <el-button type="success">娱乐</el-button>
                <el-button type="success" plain
                  ><svg class="menuIcon iconm2" aria-hidden="true">
                    <use xlink:href="#iconzaixiankefu"></use></svg
                  >在线客服</el-button
                >
              </el-row>
            </td>
          </tr>
        </table>
      </div>
      <div>
        <!-- 显示商品区域 -->
        <div class="goods_container">
          <el-row :gutter="12">
            <el-col :span="4" v-for="(aa, index) in ggglist" :key="aa">
              <el-card :body-style="{ padding: '0px' }">
                <img class="image" :src="aa.url" alt="用来指定加载不成功的文本" />
                <div style="padding: 14px">
                  <span class="word">{{aa.content}}</span>
                  <div class="bottom clearfix">
                    <time class="time">第 {{ index }} 个</time>
                    <el-button type="text" class="button">评论分析</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 空白一行 -->
    <div class="space"></div>
      <!-- 关于我们 网页尾灯 -->
      <el-row class="tail">
        <el-col class="tail1">
          <el-link @click="about_us"> 关于我们 </el-link>
          <span> | </span>
          <el-link> 联系我们 </el-link>
          <span> | </span>
          <el-link> 联系客服 </el-link>
          <span> | </span>
          <el-link> 合作招商 </el-link>
          <span> | </span>
          <el-link> 商家帮助 </el-link>
          <span> | </span>
          <el-link> 营销中心 </el-link>
          <span> | </span>
          <el-link> 手机B POA </el-link>
          <span> | </span>
          <el-link> 友情链接 </el-link>
          <span> | </span>
          <el-link> 销售联盟 </el-link>
          <span> | </span>
          <el-link> B POA社区 </el-link>
          <span> | </span>
          <el-link> 风险监测 </el-link>
          <span> | </span>
          <el-link> 隐私政策 </el-link>
          <span> | </span>
          <el-link> B POA公益 </el-link>
        </el-col>
        <el-col class="tail1">
          <el-link> 京公网安备 11000002000088号 </el-link>
          <span> | </span>
          <el-link> 京ICP证070359号 </el-link>
          <span> | </span>
          <el-link> 新出发京零 字第大120007号 </el-link>
        </el-col>
        <el-col class="tail1">
          <el-link> 互联网出版许可证编号新出网证(京)字150号 </el-link>
          <span> | </span>
          <el-link> 出版物经营许可证 </el-link>
          <span> | </span>
          <el-link> 网络文化经营许可证京网文[2014]2148-348号 </el-link>
          <span> | </span>
          <el-link> 违法和不良信息举报电话：4006561155 </el-link>
        </el-col>
        <el-col class="tail1">
          <el-link> Copyright © 2004-2021  B Poa.com版权所有 版权所有 </el-link>
          <span> | </span>
          <el-link> 消费者维权热线：4006067733 </el-link>
          <span> | </span>
          <el-link> 经营证照 </el-link>
          <span> | </span>
          <el-link> (京)网械平台备字(2018)第00003号 </el-link>
          <span> | </span>
          <el-link> 营业执照 </el-link>
        </el-col>
        <el-col class="tail1">
          <img class="tail2" src="../assets/back_picture/3.1.png" />
          <span> * </span>
          <img class="tail2" src="../assets/back_picture/3.2.png" />
          <span> * </span>
          <img class="tail2" src="../assets/back_picture/3.3.png" />
          <span> * </span>
          <img class="tail2" src="../assets/back_picture/3.4.png" />
          <span> * </span>
          <img class="tail2" src="../assets/back_picture/3.5.png" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgSrc: require("../assets/back_picture/back1.webp"),
      ggglist:[
        {url:require("../assets/back_picture/3_1.png"),content:'【第三天】还差第三条船'},
        {url:require("../assets/back_picture/3_2.png"),content:'【剧场版】夏目友人帐 唤石者与怪异的访客 PV'},
        {url:require("../assets/back_picture/3_3.png"),content:'【4月】佐贺偶像是传奇 卷土重来 05【独家正版】'},
        {url:require("../assets/back_picture/3_4.png"),content:'完美世界动漫明日上映，还有人记得这首无归么？'},
        {url:require("../assets/back_picture/3_5.png"),content:'【卡酷少儿】【十分开心】 童年的精彩回忆'},
        {url:require("../assets/back_picture/3_6.png"),content:'【初兽猫cos】超还原的三哥cos'},
        {url:require("../assets/back_picture/3_7.png"),content:'张兴哲在节目上，被年轻人说是过气歌手'},
        {url:require("../assets/back_picture/3_8.png"),content:'【简单版】好听到头皮发麻的《see you again》'},
        {url:require("../assets/back_picture/3_9.png"),content:'原音版来了......'},
        {url:require("../assets/back_picture/3_10.png"),content:'【(G)I-DLE】[练习室版本] - HWAA'},
        {url:require("../assets/back_picture/3_11.png"),content:'哥哥 你给我打蓝buff 你男朋友不会生气吧'},
        {url:require("../assets/back_picture/3_12.png"),content:'Excel大神上分攻略'}
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.img_1{
  height: 80px;
  width: 130px;
}

// 网页尾灯

.tail2 {
  position: relative;
  height: 30px;
  width: 30px;
}
.tail1 {
  position: relative;
  text-align: center;
  height: 30px;
  width: 100%;
  background-color: rgb(231, 224, 183);
}
.tail {
  position: relative;
  bottom: 0px;
  height: 250px;
  width: 100%;
  background-color: rgb(231, 224, 183);
}

// 默认商品显示区域样式
.goods_container {
  position: relative;
  height: auto;
  margin-top: 20px;
}
.image {
  width: 100%;
  display: block;
}
//产品信息  文字描述部分超出用省略号
.word {
  width: 100%; /*根据自己项目进行定义宽度*/
  overflow: hidden; /*设置超出的部分进行影藏*/
  text-overflow: ellipsis; /*设置超出部分使用省略号*/
  white-space: nowrap; /*设置为单行*/
}
// 卡片显示商品样式
.time {
  font-size: 13px;
  color: #999;
}
.button {
  padding: 0;
  float: right;
}

.space {
  height: 5%;
  background-color: rgb(209, 123, 141);
  position: relative;
}
.table2 {
  position: relative;
  height: 100%;
  width: 100%;
}
.table1 {
  position: relative;
  height: 100%;
  width: 100%;
}
.table {
  position: relative;
  width: 100%;
  height:100%;
}
.body {
  position: relative;
  height: 100%;
  width: 80%;
  margin-left: 10%;
  z-index: 2;
  // background-color: rgb(228, 167, 167);
}
.main {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgb(153, 112, 112);
}
.logo1{
    position: relative;
    height: 100px;
    width: 110px;
    margin-left: 20px;
    // margin-top: -30px;
    
   
}
.blank {
    // z-index: 2;
  position: relative;
  width: 100%;
  height: 70px;
//   background-color: rgb(228, 8, 8);
}
.menuIcon {
  font-size: 16px;
}
.icon11 {
  width: 9em;
  height: 9em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  // top: 30px;
  margin-left: 10%;
  position: relative;
}
.icon22 {
  width: 12em;
  height: 12em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  // top: 30px;
  margin-left: 35%;
  position: relative;
}
.icon33 {
  width: 12em;
  height: 12em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  // top: 30px;
  // margin-left: 35%;
  position: relative;
}
.icon2 {
  // width: 1em;
  // height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  top: 30px;
  margin-left: 35%;
  position: relative;
}
.icon1 {
  // width: 1em;
  // height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  top: 30px;
  margin-left: 10%;
  position: relative;
}

.iconm2 {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  // top: 30px;
  // margin-left: 10%;
  position: relative;
}
.iconm1 {
  width: 3em;
  height: 3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  // top: 30px;
  // margin-left: 10%;
  position: relative;
}
.input1 {
  position: absolute;
  margin-left: 10%;
  width: 450px;
  top: 20px;
  background-color: rgb(12, 11, 11);
}
.a2 {
  position: relative;
  height: 45px;
  //   width: 90px;
  top: 10px;
  margin-left: 50%;
  border-radius: 50px;
}
.a1 {
  position: relative;
  height: 45px;
  width: 90px;
  top: 10px;
  margin-left: 5%;
  border-radius: 50px;
}
.first {
  // position: static;
  width: 100%;
  height: 100%;
  background-color:white;
  z-index: 2;
}
.front {
  height: 40%;
  width: 100%;
  // background-color: rgb(50, 134, 207);
  position: relative;
  z-index: 2;
}
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: 1;
  position: absolute;
  
}

</style>
